<template>
    <div class="screenfull">
        <i
            :class="['iconfont',isFullscreen?'icon-fullscreen-exit':'icon-fullscreen']"
            @click="click"
        ></i>
    </div>
</template>

<script>
import screenfull from "screenfull";

export default {
    name: "Screenfull",
    data () {
        return {
            isFullscreen: false,
        };
    },
    mounted () {
        this.init();
    },
    beforeDestroy () {
        this.destroy();
    },
    methods: {
        click () {
            if (!screenfull.isEnabled) {
                this.$message({
                    message: "you browser can not work",
                    type: "warning",
                });
                return false;
            }
            screenfull.toggle();
        },
        change () {
            this.isFullscreen = screenfull.isFullscreen;
        },
        init () {
            if (screenfull.isEnabled) {
                screenfull.on("change", this.change);
            }
        },
        destroy () {
            if (screenfull.isEnabled) {
                screenfull.off("change", this.change);
            }
        },
    },
};
</script>


<style lang="scss" scoped>
.screenfull {
    i {
        font-size: 24px;
        cursor: pointer;
    }
}
</style>
